<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="show"></div>
<div>
    <h4 id="tag" style="color: red"></h4>
    <h4 id="tag2" style="color: blue"></h4>
    <label for="dyj">选择打印机</label>
    <select id="dyj">
        <option value="">==请选择==</option>
    </select>
    <br>
    <label for="copies">打印份数</label><input type="text" id="copies">
    <br>
    <label for="pdfID">输入要打印的PDF ID</label>
    <input  type="text" id="pdfID">
    <br>
    <label for="pageRanges1">打印范围</label><input type="number" id="pageRanges1">~<input type="number" id="pageRanges2">
    <br>
    <label for="sides">选择单双页</label>
    <select id="sides">
        <option value="0">单页</option>
        <option value="1">双页</option>
    </select>
    <br>
    <label for="mediaSize">选择纸张大小</label>
    <select id="mediaSize">
        <option value="A4">A4</option>
        <option value="A3">A3</option>
        <option value="A5">A5</option>
        <option value="B4">B4</option>
    </select>
    <br>
    <hr>
    <label for="copies2">打印份数</label><input type="text" id="copies2">
    <br>
    <label for="pdfID2">输入要打印的PDF ID</label>
    <input  type="text" id="pdfID2">
    <br>
    <label for="pageRanges1">打印范围</label><input type="number" id="pageRanges3">~<input type="number" id="pageRanges4">
    <br>
    <label for="sides2">选择单双页</label>
    <select id="sides2">
        <option value="0">单页</option>
        <option value="1">双页</option>
    </select>
    <br>
    <label for="mediaSize2">选择纸张大小</label>
    <select id="mediaSize2">
        <option value="A4">A4</option>
        <option value="A3">A3</option>
        <option value="A5">A5</option>
        <option value="B4">B4</option>
    </select>
    <br>
    <button onclick="printPDF()" id="btn">点我打印</button>
</div>
</body>
<script src="js/jquery-3.6.0.js" type="text/javascript"></script>
<script type="text/javascript">

    if (window.WebSocket) {
        console.log("HTML5 WebSocket is supported")
        id = guid();
        // var socket = new WebSocket("ws:127.0.0.1:8998/localClient/" + id)
        var socket = new WebSocket("ws:127.0.0.1:8998/localClient/" + id)
        socket.onopen = function () {
            $("#tag").text(id+"  已连接")
        }
        socket.onclose = function () {
            var t = setInterval(function () {
                    $("#tag").text(id+"  连接断开,五秒后尝试重连")
                    socket = new WebSocket("ws:127.0.0.1:8998/localClient/" + id)
                    socket.onopen = function () {
                        $("#tag").text(id+"  已连接")
                        window.clearInterval(t);
                    }
                }
                , 5000)
        }
    } else {
        console.log("HTML5 WebSocket is not supported")
        $("#btn").onclick = not()
    }


    function not() {
        alert("HTML5 WebSocket is not supported")
    }


    function guid() {
        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
            var r = Math.random() * 16 | 0,
                v = c == 'x' ? r : (r & 0x3 | 0x8);
            return v.toString(16);
        });
    }

    function printPDF() {
        var dyj = $("#dyj  option:selected").val()
        var copies = $("#copies").val()
        var sides = $("#sides  option:selected").val()
        var pageRanges = $("#pageRanges1").val() + "," + $("#pageRanges2").val()
        var mediaSize = $("#mediaSize  option:selected").val()
        var fileStream = $("#pdfID").val()
       // var pdfID = $("#pdfID").val()
       /* $.ajax({
            type:"GET",
            url:"/FileStream/"+1,
            success(res){
                fileStream = res.data.first
                console.log(res.data)
                socket.send(JSON.stringify({
                    total:2,
                    0:
                        {   "customerId": id, "oper": "打印提交", "printer": dyj, "pageRanges": pageRanges,
                            "sides": sides, "copies": copies, "mediaSize": mediaSize, "fileStream": fileStream},
                    1:
                        {   "customerId": id, "oper": "打印提交", "printer": dyj, "pageRanges": $("#pageRanges3").val() + "," + $("#pageRanges4").val(),
                            "sides": $("#sides2  option:selected").val(), "copies": $("#copies2").val(),
                            "mediaSize": $("#mediaSize2  option:selected").val(), "fileStream": res.data.second}
                }));
            }
        })*/
        socket.send(JSON.stringify({
            total:1,
            0:
                {   "customerId": id, "oper": "打印提交", "printer": dyj, "pageRanges": pageRanges,
                    "sides": sides, "copies": copies, "mediaSize": mediaSize, "fileStream": "printTest.pdf"},
          /*  1:
                {   "customerId": id, "oper": "打印提交", "printer": dyj, "pageRanges": $("#pageRanges3").val() + "," + $("#pageRanges4").val(),
                    "sides": $("#sides2  option:selected").val(), "copies": $("#copies2").val(),
                    "mediaSize": $("#mediaSize2  option:selected").val(), "fileStream": $("#pdfID2").val()}*/
        }));

    }

    socket.onmessage = function (messageMeta) {
        console.log(messageMeta.data)
        var message = messageMeta.data
        var obj = JSON.parse(message);
        if (message.indexOf("printList") !== -1) {
            $("#dyj").empty()
            for (let printListKey in obj.printList) {
                $("#dyj").append(
                    '<option value="' + obj.printList[printListKey] + '">' + obj.printList[printListKey] + '</option>'
                )
            }
        }

        if (obj.code === -1){
            $("#tag2").text(obj.message)
        }
        if (obj.code === 100001){
            $("#tag2").text(obj.message)
        }
        if (obj.code === 100004){
            $("#tag2").text(obj.message)
        }
        if (obj.code === 100005){
            $("#tag2").text(obj.message)
        }
        if (obj.code === 2000){
            $("#tag2").text(obj.message)
        }
    }
</script>
</html>
